<template>
  <el-row v-if="categoryAttributes.length" :gutter="gutter" style="width:100%">
    <el-col :span="24" class="head">
      <strong>{{ attName }}</strong>
    </el-col>
    <el-col v-for="(item, index) in categoryAttributes" :key="index" :span="span" :xl="xl">
      <div>{{ item.arrName }}</div>
      <el-form-item
        v-if="item.inputType == null || item.inputType == 2 || item.inputType == 3"
        :label="item.attrName"
        :prop="`spuChannelCategoryAttrList[${findAttrIndex(item.attrId)}].attrValue`"
        :rules="{ required: item.requiredFlag, message: `${item.attrName}不能为空`, trigger: 'blur' }"
      >
        <el-input
          v-if="item.inputType == null"
          v-model="commodityAttribute.spuChannelCategoryAttrList[findAttrIndex(item.attrId)].attrValue"
          :placeholder="`请输入${item.attrName}`"
          :disabled="isDisabled"
        />

        <el-select
          v-if="item.inputType == 1 || item.inputType == 2"
          v-model="commodityAttribute.spuChannelCategoryAttrList[findAttrIndex(item.attrId)].attrValue"
          value-key="attrValueId"
          clearable
          :placeholder="`请选择${item.attrName}`"
          :multiple="item.inputType == 2"
          :disabled="isDisabled"
        >
          <el-option v-for="op in item.attrValueList" :key="op.attrValueId" :label="op.attrValueName" :value="op.attrValueId" />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="item.inputType == 10"
        :label="item.attrName"
        class="unit"
        :prop="`spuChannelCategoryAttrList[${findAttrIndex(item.attrId)}]`"
        :rules="{ required: item.requiredFlag, validator: validator, trigger: 'blur' }"
      >
        <el-form-item v-for="(unitItem, unitIndex) in item.units" :key="unitIndex" class="analytical-unit" :label="item.expands[unitIndex] || ''">
          <el-input v-model="commodityAttribute.spuChannelCategoryAttrList[findAttrIndex(item.attrId)].attrValue[unitIndex]" :disabled="isDisabled" clearable />
          <el-select
            v-model="commodityAttribute.spuChannelCategoryAttrList[findAttrIndex(item.attrId)].unitValue[unitIndex].units[unitIndex]"
            placeholder=" "
            :disabled="isDisabled"
            clearable
            @change="change()"
          >
            <el-option v-for="(unit, unit_Index) in unitItem" :key="unit_Index" :label="unit" :value="unit" />
          </el-select>
        </el-form-item>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'CategoryAttributes',
  props: {
    commodityAttribute: {
      type: Object,
      default: () => {
        return {}
      }
    },
    categoryAttributes: {
      type: Array,
      default() {
        return []
      }
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    attName: {
      type: String,
      default: ''
    },
    span: {
      type: Number,
      default: 12
    },
    xl: {
      type: Number,
      default: 8
    },
    gutter: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      validator: (rule, value, callback) => {
        if (!value.requiredFlag || (value.attrValue.every((_) => _) && value.unitValue.every((_) => _))) callback()
        else callback(new Error('信息填写不完整'))
      }
    }
  },
  methods: {
    findAttrIndex(id) {
      return this.commodityAttribute.spuChannelCategoryAttrList.findIndex((item) => item.attrId === id)
    },
    change() {
      this.$forceUpdate()
    },
    set(arr) {
      return [...new Set(arr)]
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../css/formcss';
.analytical-unit {
  margin: 0;
  /deep/ .el-form-item__label {
    width: auto !important;
    &::before {
      content: '';
      margin: 0;
    }
  }
  /deep/ .el-form-item__content {
    margin-left: 0 !important;
  }
}
/deep/ .unit > .el-form-item__content {
  flex-wrap: wrap;
}
</style>
